export default {
  inserted: function(el) {
    // 获取父元素的ID
    const content = el.parentNode
    const maxX = content.offsetWidth - el.offsetWidth
    const maxY = content.offsetHeight - el.offsetHeight
    const minX = 0
    const minY = 0
    el.onmousedown = function(event) {
      // 防止覆盖同元素造成某些问题
      el.style.zIndex = 2
      // 鼠标按下时获取鼠标与元素之间的距离   offsetX/Y 指的是鼠标与触发事件的元素之间的距离
      const mouseX = event.offsetX
      const mouseY = event.offsetY
      el.onmousemove = function(event) {
        // 元素与页面间的距离 = 鼠标与页面之间的距离 - 鼠标与元素之间的距离-侧边栏的宽度
        let targetX = event.pageX - mouseX - content.offsetLeft - 207
        let targetY = event.pageY - mouseY - content.offsetTop
        if (targetX <= minX) {
          targetX = minX
        } else if (targetX >= maxX) {
          targetX = maxX
        }
        if (targetY <= minY) {
          targetY = minY
        } else if (targetY >= maxY) {
          targetY = maxY
        }
        el.style.transform = `translate(${targetX}px, ${targetY}px)`
      }
      el.onmouseup = function() {
        el.style.zIndex = 0
        el.onmousemove = null
      }
      el.onmouseover = function() {
        el.style.zIndex = 0
        el.onmousemove = null
      }
    }
  }
}
